import * as React from "react"
import { View, Text, ViewStyle, TextStyle, Image } from "react-native"
import { px2dp } from "../../utils"
import { InputBankCard, Button } from "../../components"
import { icons } from "../../assets/index"
import { color } from "@/theme"

const styleScreen: ViewStyle = {
  backgroundColor: color.backgroundInnerPage
}
const styleRechargeable: ViewStyle = {
  paddingTop: px2dp(10),
  paddingLeft: px2dp(15),
  paddingRight: px2dp(15)
}

const styleContent: ViewStyle = {
  backgroundColor: color.background,
  borderRadius: px2dp(4),
  paddingHorizontal: px2dp(10),
  paddingVertical: px2dp(15),
  paddingBottom: px2dp(24)
}

const styleInformation: ViewStyle = {
  marginTop: px2dp(10),
  flexDirection: "row",
  alignItems: "center"
}

const styleInformationText: TextStyle = {
  color: color.warningText,
  fontSize: px2dp(12),
  marginLeft: px2dp(10)
}

const styleBtnView: ViewStyle = {
  alignItems: "center",
  marginTop: px2dp(40)
}

const styleBtn: ViewStyle = {
  backgroundColor: color.themeColor,
  height: px2dp(50),
  width: px2dp(311)
}

const styleBtnText: TextStyle = {
  color: color.background,
  fontSize: px2dp(18),
  fontWeight: "bold"
}

export interface AddBankCardProps {}

export interface AddBankCardState {}

export default class AddBankCard extends React.Component<AddBankCardProps, AddBankCardState> {
  state = {
    banckCardInfo: null
  }

  /**
   * 获取银行卡信息
   * @param data {userName,backCardNumber}
   */
  getBankInfo(data) {
    this.setState({ banckCardInfo: { ...data } })
  }

  public render() {
    return (
      <View style={styleScreen}>
        <View style={styleRechargeable}>
          <View style={styleContent}>
            <View>
              <Text
                style={{
                  fontSize: px2dp(16),
                  fontWeight: "bold",
                  color: color.storybookTextColor
                }}
              >
                请填写银行卡信息
              </Text>
            </View>
            <InputBankCard getBankInfoClick={this.getBankInfo.bind(this)}></InputBankCard>
          </View>
          <View style={styleInformation}>
            <Image source={icons.warn} />
            <Text style={styleInformationText}>
              只能输入与姓名相匹配的银行卡号、否则无法成功提款
            </Text>
          </View>
          <View style={styleBtnView}>
            <Button
              text={"确定"}
              style={styleBtn}
              textStyle={styleBtnText}
              onPress={() => {
                alert(JSON.stringify(this.state.banckCardInfo))
              }}
            ></Button>
          </View>
        </View>
      </View>
    )
  }
}
